<template>
	<view class="">
		<view class="ffffff">
			<!-- <u-tabs :list="tabslist" :scrollable="false" lineColor="#00a99e" @click="changetab" :activeStyle="{
			    color: '#00a99e',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			            color: '#333333',
						fontWeight: '540',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 44px;"></u-tabs> -->
					<view class="flexbetween dingwei" style="top: 10rpx;">
						<view class="flexcenter " :class="tabsid==item.value?'lansebj':'baisebj'" v-for="item in tabslist" :key="item.value"  @click="changetab(item)"
						style="width: 33.33333%;padding: 15rpx;box-sizing: border-box;">{{item.name}}</view>
						
					</view>
		</view>
		<view class="mainpadding2">
			<template v-if="tabsid==1">
				<view class="flexleft margin_top" v-for="(item,index) in list.data1" :key="item.id" @click="jumpdetail(item.id)">
					<image :src="item.image_text" v-if="item.image_text" mode="" class="margin_right2 radius" style="width: 110rpx;height: 110rpx;min-width: 110rpx;"></image>
					<view class="ffffff mainpadding radius hei_text flexleft main_size bold" style="width: 100%;">{{index+1}}.{{item.name}}</view>
				</view>
			</template>
			<template v-if="tabsid==2">
				<view class="flexleft margin_top" v-for="(item,index) in list.data2" :key="item.id" @click="jumpdetail(item.id)">
					<image :src="item.image_text" v-if="item.image_text" mode="" class="margin_right2 radius" style="width: 110rpx;height: 110rpx;min-width: 110rpx;"></image>
					<view class="ffffff mainpadding radius hei_text flexleft main_size bold" style="width: 100%;">{{index+1}}.{{item.name}}</view>
				</view>
			</template>
			<template v-if="tabsid==3">
				<view class="flexleft margin_top" v-for="(item,index) in list.data3" :key="item.id" @click="jumpdetail(item.id)">
					<image :src="item.image_text" v-if="item.image_text" mode="" class="margin_right2 radius" style="width: 110rpx;height: 110rpx;min-width: 110rpx;"></image>
					<view class="ffffff mainpadding radius hei_text flexleft main_size bold" style="width: 100%;">{{index+1}}.{{item.name}}</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: 1, //1登錄操作手冊,2使用操作手冊
				tabsid: 1,
				tabslist: [{
					name: '用戶',
					value: 1,
				}, {
					name: '商家',
					value: 2,
				}, {
					name: '外送',
					value: 3,
				}],
				list: {
					// data1=用户端,data2=商家端,data3=外送端
					data1: [],
					data2: [],
					data3: [],
				},
			}
		},
		onLoad(options) {
			this.type = options.type
			this.init()
		},

		methods: {
			changetab(e) {
				this.tabsid = e.value
			},
			jumpdetail(id) {
				uni.navigateTo({
					url: "/pages/caozuoshouce/caozuosm?type=" + this.type + "&id=" + id
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {}
				let url = '/api/index/czscIndex'
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
		}
	}
</script>

<style scoped>
page{
	background-color: #00a99e;
}
.lansebj{
	background-color: #00a99e;
	border-radius: 10rpx 10rpx 0 0;
	color: #fff;
}
.baisebj{
	background-color: #fff;
	color: #333;
}
</style>